<template>
	<view class="content">
		<!-- 这里是状态栏 -->
		<view class="status_bar"></view>
		<HeadLeft :webtext="webtext"></HeadLeft>
		<view class="body">
			<view class="mine-header">
				<view class="account">
					<view class="login" @click="fn()" v-if="!logShow">登录</view>
					<image v-if="logShow" src="../../static/static/loginlogo.png" mode="aspectFit"></image>
					<view class="accountName" v-if="logShow">
						<view class="accountNum">账户：{{this.userinfo.username}}</view>
						<view class="accountNum">昵称：{{this.userinfo.nickname}}</view>
					</view>
				</view>
			</view>
			<view class="money">
				<ul class="money-head">
					<li>
						<view>账户余额</view>
						<view class="li-left">{{this.userinfo.money}}</view>
					</li>
					<li>
						<view>今日盈亏</view>
						<view class="li-right-red" v-if="this.flag==true">{{this.profit}}</view>
						
						<view class="li-right-green" v-if="this.flag==false">{{this.profit}}</view>
					</li>
				</ul>
				<ul class="money-footer">
					<li @click=switchTab(url1)>
						<view class="flex-center withdrawBTN">
							<view>入金</view>
							<image height="24" src="../../static/static/member-pay.png" mode="aspectFit"></image>
						</view>
					</li>
					<li  @click=navto(url2)>
						<view class="flex-center withdrawBTN">
							<view>赎回</view>
							<image src="../../static/static/member-buy.png" mode="aspectFit"></image>
						</view>
					</li>
				</ul>
			</view>
			<ul class="list">
				<li v-for="(item, index) in list" :key="index" @click=navto(item.url)>
					<img :src="item.img" class="" />
					<p class="">{{ item.title }}</p>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
import HeadLeft from '../../components/headLeft.vue';
export default {
	components: {
		HeadLeft
	},
	data() {
		return {
			// 登录状态
			logShow:'',
			userinfo:{},
			profit:'',
			flag:true,
			webtext: '个人中心',
			url1:'/pages/center/index',
			url2:'/pages/mine/redeem',
			list: [
				{
					url: '/pages/mine/betRecordList',
					title: '交易记录',
					img: '../../static/static/member-memu1.png'
				},
				{
					url: '/pages/mine/thirdRechargeRecordList',
					title: '入金记录',
					img: '../../static/static/member-memu2.png'
				},
				{
					url: '/pages/mine/withdrawRecordList',
					title: '赎回记录',
					img: '../../static/static/member-memu3.png'
				},
				{
					url: '/pages/mine/passwordManager',
					title: '密码管理',
					img: '../../static/static/member-memu4.png'
				},
				{
					url: '/pages/mine/bankCardManager',
					title: '钱包管理',
					img: '../../static/static/member-memu5.png'
				},
				{
					url: '/pages/login/index',
					title: '切换账号',
					img: '../../static/static/member-memu6.png'
				}
			]
		};
	},
	onShow() {
		if (uni.getStorageSync('Authorized')) {
			this.$u.api.user().then(res => {
				this.userinfo = res.user
				if(res.profit.indexOf("-")!= -1){
					this.flag = false
				}
				this.profit = res.profit
				this.logShow = true
			}).catch(()=>{
				this.logShow = false
			})
		} else{
			uni.navigateTo({
				url:"/pages/login/index"
			})
			this.logShow = false
		}
	},
	methods:{
		// 跳转登录
		fn(){
			uni.navigateTo({
				url:"/pages/login/index"
			})
		},
		switchTab(url){
			uni.switchTab({
				url:url
			})
		},
		navto(url){
			uni.navigateTo({
				url:url
			})
		}
	}
}
</script>

<style lang="scss" scoped>
* {
	padding: 0;
	margin: 0;
}
.body {
	height: calc(100vh - 88upx - 100upx - var(--status-bar-height));
	overflow-y: auto;
}
li {
	list-style: none;
}
.flex-space-around {
	display: -webkit-flex;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
	flex-direction: row;
}

.flex-center {
	display: -webkit-flex;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}

.flex-space-between {
	display: -webkit-flex;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
}

.flex-start {
	display: -webkit-flex;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
}

.flex-end {
	display: -webkit-flex;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	flex-direction: row;
}

.app-close {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(/images/close-gray.png) no-repeat;
	background-size: contain;
	position: absolute;
	left: 10px;
	top: 7px;
}
.mine-header {
	background: url(/static/static/memberBg.png) no-repeat center;
	height: 320upx;
	background-size: 100%;
	.account {
		display: flex;
		height: 200upx;
		align-items: center;
		width: 100%;
		.login {
			border: 1px solid #fff;
			color: #fff;
			width: 160upx;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			margin: 0 auto;
			border-radius: 12upx;
		}
		image {
			display: block;
			width: 144upx;
			height: 144upx;
			margin: 0 0 0 30upx;
		}
		.accountNum {
			line-height: 40upx;
			text-align: center;
			font-size: 28upx;
			color: #231f1e;
			text-align: left;
			margin: 20upx 40upx;
			color: #fff;
		}
	}
}
.money {
	position: relative;
	padding: 30upx 40upx;
	width: calc(100% - 60upx);
	margin: -120upx auto 30upx;
	border-radius: 24upx;
	height: 280upx;
	.money-head {
		border-radius: 24upx;
		overflow: hidden;
		position: absolute;
		left: 0upx;
		top: -16upx;
		z-index: 1;
		width: 100%;
		background: #31395e;
		padding: 30upx 0upx;
		li {
			width: 50%;
			float: left;
			font-size: 28upx;
			line-height: 52upx;
			text-align: center;
			color: #d3d3d9;
			.li-left {
				color: #1b5ea0;
				font-weight: 700;
			}
			.li-right-green {
				color: green;
				font-weight: 700;
			}
			.li-right-red {
				color: red;
				font-weight: 700;
			}
		}
	}
	.money-footer {
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 176upx;
		z-index: 1;
		width: 100%;
		background: #31395e;
		border-radius: 24upx;
		padding: 10upx 0upx;
		li {
			float: left;
			width: 50%;
			line-height: 60upx;
			text-align: center;
			font-size: 28upx;
			.withdrawBTN {
				color: #fff;
				line-height: 80upx;
				margin: 0 auto;
				border-radius: 16upx;
				view {
					margin-right: 30upx;
				}
				image {
					width: 56upx;
					height: 48upx;
				}
			}
		}
	}
}
.list {
	margin: 30upx auto;
	overflow: hidden;
	width: calc(100% - 60upx);
	border-radius: 12upx;
	li {
		padding: 14upx 30upx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		flex-direction: row;
		border-bottom: 4upx solid #293256;
		background: #31395e url(/static/direct-right1.png) no-repeat 98%;
		background-size: 32upx;
		img {
			display: block;
			width: 32upx;
			height: 32upx;
			margin: 0 20upx 0 0;
		}
		p {
			line-height: 48upx;
			color: #c6c8d4;
			font-size: 0.8em;
			text-align: center;
		}
	}
}
</style>
